<template>
  <view>
    <view class="device-box" @click="chooseWork()">
      <view class="device-title">
        <image src="@/static/images/tabbar/user.png"></image>
        <view class="device-name">选择您的工作状态</view>
      </view>
      <view class="device-icon"><u-icon name="arrow-right" color="#999999" size="19"></u-icon></view>
    </view>
    <view v-for="(item,index) in deviceLists" :key="index" class="device-list">
      <view class="dev-name">{{item.deviceName}}</view>
      <view class="dev-icon" @click="checkFun(index)">
        <image :src="checkedRadio" v-if="item.checked"></image>
        <image :src="uncheckRadio" v-else></image>
      </view>
    </view>
    <view class="device-btns">
      <button type="primary" class="gowork-box-btn blue" @click="goConfirm()">确认</button>
    </view>
    <u-modal :show="showConfir" @confirm="selectDeviceFun" confirmText="我知道了">
      <view class="confir-box">
        <view class="images-box">
          <image src="@/static/images/ok.png" xlass="img"></image>
        </view>
        <view>设备选择成功</view>
      </view>
    </u-modal>
    <custom-tabbar class="tabbar-box" :list="tabbarLists"></custom-tabbar>
  </view>
</template>
<script>
  import { getDevicesList, getToWork } from "@/api/devices.js"
  import config from '@/config'
  import { toast, getButtonShow } from '@/utils/common.js';
  import { getDriverId } from '@/utils/auth';
  export default {
    data() {
      return {
        showConfir: false,
        showTips: false,
        deviceLists: [
        ],
        tabbarLists: [
          {
            "pagePath": "/pages/devices/index",
            "hidden": false,
            "active": true,
            "selectedColor": '#409EFE',
            "iconPath": require("static/images/tabbar/device.png"),
            "selectedIconPath": require("static/images/tabbar/device_.png"),
            "text": "设备选择"
          },
          {
            "pagePath": "/pages/waybill/index",
            "hidden": false,
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": require("static/images/tabbar/work.png"),
            "selectedIconPath": require("static/images/tabbar/work_.png"),
            "text": "运单"
          },
          {
            "pagePath": "/pages/mine/index",
            "hidden": false,
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": require("static/images/tabbar/mine.png"),
            "selectedIconPath": require("static/images/tabbar/mine_.png"),
            "text": "我的"
          }
        ],
      }
    },
    onPullDownRefresh() {
      this.fetchData();
      wx.hideNavigationBarLoading();
      wx.stopPullDownRefresh();
    },
    onReachBottom() {
      this.fetchData();
    },
    computed: {
      uncheckRadio() {
        return config.baseImgUrl + '/uncheckRadio.png'
      },
      checkedRadio() {
        return config.baseImgUrl + '/checkedRadio.png'
      },
      bacImg() {
        if (this.$store.state.user.curTypeColor == "#D22C2C") {
          return config.baseImgUrl + '/bac1.png'
        } else if (this.$store.state.user.curTypeColor == "#409EFE") {
          return config.baseImgUrl + '/bac.png'
        } else {
          return config.baseImgUrl + '/bac.png'
        }
      }
    },
    methods: {
      checkFun(index) {
        this.deviceLists[index].checked = !this.deviceLists[index].checked
      },
      async goConfirm() {
        const confFlag = this.deviceLists.some(item => {
          return item.checked
        })
        if (confFlag) {
          let _this = this;
          let queryParam = {
            userId: getDriverId(),
            deviceInfoIds: _this.deviceLists.filter(k => k.checked).map(i => {
              return i.id
            })
          }
          const res = await getToWork(queryParam);
          if (res.code == 0) {
            this.showConfir = true
          }
        }
        else this.$modal.msgError('请选择设备');
      },
      async selectDeviceFun() {
        this.showConfir = false
        wx.reLaunch({
          url: '/pages/waybill/index'
        })
      },
      chooseWork() {
        wx.reLaunch({
          url: '/pages/devices/working'
        })
      },
      async fetchData() {
        const queryParam = {
          userId: getDriverId(),
          deviceId: ""
        }
        const res = await getDevicesList(queryParam);
        if (res.code === 0) {
          const dataLists = res.data.map(item => {
            return {
              deviceName: item.deviceName,
              checked: false,
              id: item.id
            }
          })
          this.deviceLists = dataLists
        }
      },
      radioChange() {

      }
    },
    onShow() {
      this.fetchData();
    },
  };
</script>

<style lang="scss" scoped>
  .device-btns {
    padding: 20rpx;
    position: fixed;
    bottom: 80px;
    background: #fff;
    width: 100%;

    button {
      height: 90rpx;
      line-height: 90rpx;
      width: calc(100% - 40rpx);
    }
  }



  .device-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    height: 60px;
    padding: 0 10px;
    margin: 0 10px 10px 10px;
    border-radius: 4px;
    font-family: PingFang SC, PingFang SC-500;

    .dev-name {
      font-size: 18px;
      color: #333;
      font-weight: 500;
    }

    .dev-icon {
      width: 20px;
      height: 20px;

      image {
        width: 20px;
        height: 20px;
        display: block;
      }
    }
  }

  .device-box {
    margin: 20px 10px 20px 10px;
    background: linear-gradient(180deg, #c4e1ff, #ffffff 60%);
    display: flex;
    align-items: center;
    height: 128rpx;
    justify-content: space-between;

    .device-title {
      display: flex;
      align-items: center;
      justify-content: start;

      image {
        width: 108rpx;
        height: 108rpx;
      }

      .device-name {
        color: #000;
        font-size: 34rpx;
        font-weight: 500;
        padding-left: 8rpx;
      }
    }
  }
</style>